<template>
  <page-state-view :view-ready="viewReady">
    <div class="full~ p-10px box-border bg-gray-200">
      <div class="box-border p-10px bg-light-50 rounded flex">
        <div class="w-200px h-200px image~"
             :style="{backgroundImage: `url(http://127.0.0.1:8081/static/group/${groupBase?.cover})`}">
        </div>
        <div class="ml-20px">
          <group-base-info :leader-id="groupBase?.leader_id"
                           :group-id="groupBase?.group_id"
                           :code="groupBase?.invitation_code"
                           :name="groupBase?.name"
                           :desc="groupBase?.desc"/>
        </div>
      </div>
      <div class="box-border p-10px bg-light-50 rounded mt-10px between~">
        <div class="text-base flex items-center">
          <div class="mr-2px">团队成员</div>
          <n-popover placement="right">
            <template #trigger>
              <div class="i-carbon-warning w-18px h-18px text-gray-500 cursor-pointer"></div>
            </template>
            <div class="text-xs text-gray-500">展示该团队的成员信息，leader可以进行团队成员的管理操作</div>
          </n-popover>
        </div>
        <n-button :type="btnType" @click="groupManageable = !groupManageable">{{ btnText }}</n-button>
      </div>
      <div class="mt-10px box-border p-10px bg-light-50 rounded">
        <group-member :list="groupMember" :manageable="groupManageable"/>
      </div>
    </div>
  </page-state-view>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import {useRoute} from "vue-router";
import {NButton, NPopover, useMessage} from "naive-ui";
import {useGetGroup, useGetMember, useGroupDetailInit} from "../hooks"
import PageStateView from "@/components/viewComponents/PageStateView.vue";
import GroupBaseInfo from "@/pages/group/components/GroupBaseInfo.vue";
import GroupMember from "@/pages/group/components/GroupMember.vue";

export default defineComponent({
  components: {PageStateView, GroupBaseInfo, GroupMember, NButton, NPopover},
  setup() {
    const message = useMessage()
    const route = useRoute()
    const {groupBase, groupMember, groupManageable, viewReady, btnType, btnText} = useGroupDetailInit()
    const groupId = route.query.groupId

    async function getGroupBaseInfo() {
      const result = await useGetGroup(groupId)
      if (result.code !== 1000) {
        message.error("获取团队信息失败")
      } else {
        message.success("获取团队信息成功")
        groupBase.value = result.data
      }
    }

    async function getGroupMember() {
      const result = await useGetMember(groupId)
      if (result.code !== 1000) {
        message.error("获取团队成员失败")
      } else {
        message.success("获取团队成员成功")
        groupMember.value = result.data.memberList
      }
    }

    onMounted(async () => {
      viewReady.value = false
      await getGroupBaseInfo()
      await getGroupMember()
      viewReady.value = true
    })

    return {
      viewReady,
      groupBase,
      groupId,
      groupMember,
      groupManageable,
      btnText,
      btnType
    }
  }
})
</script>

<style scoped>

</style>